import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";

// 自动导入
import AutoImport from "unplugin-auto-import/vite";
// 按需加载自定义组件
import Components from "unplugin-vue-components/vite";
// 自动引入组件样式
import ElementPlus from "unplugin-element-plus/vite";
// 引入elmentPlus相关函数
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// 自动elementPlus导入图标
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

// 查看引用关系
import Inspect from "vite-plugin-inspect";

// 引入svg
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

const pathSrc = resolve(__dirname, "src");

import {
  name,
  version,
  engines,
  dependencies,
  devDependencies,
} from "./package.json";

console.log(
  "name:",
  name,
  "version:",
  version,
  "engines",
  engines,
  "dependencies:",
  dependencies,
  "devDependencies:",
  devDependencies,
);

/** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示 */
const __APP_INFO__ = {
  pkg: { name, version, engines, dependencies, devDependencies },
  buildTimestamp: Date.now(),
};

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": pathSrc,
    },
  },
  css: {
    // CSS 预处理器
    preprocessorOptions: {
      // 定义全局 SCSS 变量
      scss: {
        javascriptEnabled: true,
        additionalData: `
          @use "@/styles/variables.scss" as *;
        `,
      },
    },
  },
  plugins: [
    vue(),
    //  jsx、tsx语法支持
    vueJsx(),
    // 开启ElementPlus自动引入CSS
    ElementPlus({}),
    // 自动导入依赖包
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue", "vue-router", "@vueuse/core"],
      resolvers: [
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
        IconsResolver({ prefix: "Icon" }), // 自动导入图标组件
      ],
      // 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)
      // dts: false,
      dts: "src/typings/auto-imports.d.ts",
      // 是否在 vue 模板中自动导入
      vueTemplate: true,
    }),
    // 按需加载组件
    Components({
      deep: true, // 搜索子目录
      // 指定自定义组件位置(默认:src/components) views 里面自定的组件
      dirs: ["src/components", "src/**/components"],
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
          enabledCollections: ["ep"],
        }),
      ],
      // 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
      // dts: false,
      dts: "src/typings/components.d.ts",
    }),
    Icons({
      // 自动安装图标库
      autoInstall: true,
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(pathSrc, "assets/icons")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    }),

    // 查看引用关系
    Inspect(),
  ],
  // 预加载项目必需的组件
  optimizeDeps: {
    include: [],
  },
  // 构建配置

  define: {
    __APP_INFO__: JSON.stringify(__APP_INFO__),
  },
});
